<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Michał Nawrocki test page </title>
        <link  rel='stylesheet' id='css'  href='styles.css' type='text/css' media='all' />
    </head>
    <body>
    	 <div id="container">
    	 	
    	 		<div class="cell small">
    	 			<div class="article">
		       			<h1>Article 1 </h1> 
		       			<p>After weeks of anticipation, speculation and debate, Euro 2012 gets under way on Friday when co-hosts Poland take on Greece in Warsaw.
							The tournament sees 16 of Europe's best footballing countries compete for the Henri Delaunay Trophy, with the final taking place in Kiev on 1 July.
							England start their campaign against France on 11 June - while Republic of Ireland are also in action. 
						</p>
	       			</div>
	       			
	       		</div>
	       			<div class="bar"></div>
	       		<div class="cell small">
	       			<div class="article">
		       			<h1>Article 2 </h1> 
		       			<p>After weeks of anticipation, speculation and debate, Euro 2012 gets under way on Friday when co-hosts Poland take on Greece in Warsaw.
						</p>
							<a href="" >link 1</a>
							<a href="" >link 2</a>
							<a href="" >link 3</a>
						
						</div>
					</div>
				<div class="bar"></div>
	       		<div class="cell">
	       			<div class="article">
		       			<h1>Article 3 </h1> 
		       			<p>After weeks of anticipation, speculation and debate, Euro 2012 gets under way on Friday when co-hosts Poland take on Greece in Warsaw.
							The tournament sees 16 of Europe's best footballing countries compete for the Henri Delaunay Trophy, with the final taking place in Kiev on 1 July.
							England start their campaign against France on 11 June - while Republic of Ireland are also in action. 
						</p>
	       			</div>
	       		
	       		</div>
	     	<div style="clear: both" ></div>
	       		
	       		
	       		
	       </div>
	       <div id="colors" style="display: none">
	       		<div class="block">
	       		    <div class="colors blue"></div>
	       			<div class="colors red"></div>
	       			<div class="colors black"></div>
	       		</div>
	       		</div>
      
   
   <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
   	var a=0;
   	$(".article").each(function(){
   		
   		var parent = $(this).parent();
   		var colors = $("#colors");
   		colors.children().attr('id','div'+a);
   		var colorshtml = colors.html();
   		$(this).append(colorshtml);
   		
   		$("#div"+a).css('top',parent.height());
   		
   		a++;
   		
   	});
   	
   	$(".colors").click(function(){
   		var parent = $(this).parent();
   		var color = $(this).attr("class").replace("colors","");
   		parent.parent().children().each(function(){
   			$(this).css('color',color);
   			
   		});
   		
   	});
   	
   
   	
   });
   	
   </script>
   </body>
    
</html>
